.familyTreeCover {
    width: 100%;
    height: 100%;
    background: #dbf2c5;
}

.familyTreeCoverBanner {
    width: 100%;
    height: 320rpx;
    /*background: red;*/
}

.familyTreeCoverBannerImage {
    width: 100%;
    height: 240rpx;
}

.familyTreeMain {
    width: 100%;
    background: #dbf2c5;
}

.clearfix:before,
.clearfix:after {
    display: table;
    line-height: 0;
    content: "";
    clear: both;
}

.box {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
}

.left {
    width: 46%;
    float: left;
    padding-left: 20rpx;
}

.right {
    width: 46%;
    float: right;
    padding-right: 20rpx;
}

.items {
    width: 100%;
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    position: relative;
}

.newsFlag {
    position: absolute;
    top: -4rpx;
    left: 20rpx;
    width: 50rpx;
    height: 50rpx;
}

.items1 {
    height: 400rpx;
    background: #76b33e;
    position: relative;
}

.items1Title {
    padding-top: 20rpx;
    padding-left: 40rpx;
    font-size: 50rpx;
    color: #fff;
    
}

.wyzs {
    width: 240rpx;
    position: absolute;
    right: 20rpx;
    bottom: 20rpx;
}

.items2 {
    height: 300rpx;
    background: #52699d;
    position: relative;
    /*padding-top: 20rpx;*/
}

.items2Title {
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    font-size: 45rpx;
    color: #fff;
}

.jzsj1 {
    width: 180rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0 auto;
}

.jzsj2 {
    width: 160rpx;
    position: absolute;
    top: 0;
    left: 0;
}

.items3 {
    height: 615rpx;
    background: #52699d;
    position: relative;
    padding-top: 20rpx;
    margin-bottom: 0rpx;
}

.items4 {
    height: 300rpx;
    background: #ea8488;
    position: relative;
}

.items4Title {
    width: 280rpx;
    text-align: center;
    position: absolute;
    right: 0;
    left: 0;
    top: 20rpx;
    margin: 0 auto;
    font-size: 45rpx;
    color: #fff;
}

.jiazupk {
    width: 150rpx;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 55rpx;
    margin: 0 auto;
}

.jzpk1,
.jzpk2 {
    position: absolute;
    bottom: 0;
}

.jzpk1 {
    width: 100rpx;
    right: 0;
    border-bottom-right-radius: 10rpx;
}

.jzpk2 {
    width: 90rpx;
    left: 0;
    border-bottom-left-radius: 10rpx;
}

.items5 {
    height: 400rpx;
    background: #f7c02f;
    position: relative;
}

.jryxTitle {
    width: 200rpx;
    text-align: center;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 20rpx;
    margin: 0 auto;
    font-size: 45rpx;
    color: #fff;
}

.jryx1 {
    width: 100%;
}

.jryx2 {
    width: 60rpx;
}

.ss {
    position: absolute;
    left: 10rpx;
    bottom: 0;
}

.dd {
    position: absolute;
    right: 10rpx;
    bottom: 0;
}

.items6,
.items7 {
    position: relative;
    height: 300rpx;
    background-repeat: no-repeat;
    background-size: 30%;
    background-position: 15% center;
}

.items6Title {
    width: 180rpx;
    position: absolute;
    right: 20rpx;
    top: 20rpx;
    font-size: 45rpx;
    color: #fff;
    text-align: left;
    line-height: 55rpx;
    /*white-space: wrap;
  overflow: hidden;
  text-overflow: ellipsis;*/
    text-overflow: -o-ellipsis-lastline;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.bgLeft {
    background-size: 160rpx;
    background-position: 0 100%;
}

.bgRight {
    background-size: 160rpx;
    background-position: 100% 100%;
}

.familyTreeMains {
    width: 100%;
    background: #fff;
    padding-top: 20rpx;
    padding-bottom: 20rpx;
}

.boxs {
    width: 100%;
    height: 100%;
    margin: 0 auto;
    overflow: hidden;
    background: #fff;
}

.lefts {
    width: 45.5%;
    float: left;
    padding-left: 20rpx;
}

.rights {
    width: 45.5%;
    float: right;
    padding-right: 20rpx;
} // 弹窗
.customPop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
    z-index: 9;
    &-box {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        width: 86%;
        height: 636rpx;
        padding-bottom: 36rpx;
        border-radius: 8rpx;
        box-shadow: 0 0 5px #363738;
        background-color: #fff;
        z-index: 99;
        box-sizing: border-box;
        overflow: hidden;
        &-title {
            position: relative;
            width: 100%;
            height: 70rpx;
            color: #363738;
            font-size: 34rpx;
            line-height: 70rpx;
            text-align: center;
            border-bottom: 2rpx solid #bfbfbf;
            box-sizing: border-box; // close
            .closePop {
                position: absolute;
                top: 0rpx;
                right: 0rpx;
                bottom: 0;
                margin: auto;
                display: flex;
                align-items: center;
                width: 60rpx;
                height: 60rpx;
                >image {
                    display: block;
                    width: 24rpx;
                    height: 24rpx;
                    margin: 0 auto;
                    object-fit: cover;
                }
            }
        }
        &-Int {
            width: 100%;
            padding: 52rpx 36rpx 0rpx;
            margin-bottom: 30rpx;
            box-sizing: border-box;
            >input {
                color: #363738;
                font-size: 30rpx;
                height: 58rpx;
                line-height: 58rpx;
                padding: 10rpx 40rpx;
                border-radius: 60rpx;
                border: 2rpx dashed #bfbfbf;
            }
            &-mtip {
                color: #bfbfbf;
                font-size: 26rpx;
                margin-top: 6rpx;
                margin-left: 40rpx;
            }
        }
        /* .confirm {
          position: absolute;
          bottom: 36rpx;
          left: 0;
          right: 0;
          color: #915e49;
          width: 280rpx;
          height: 79rpx;
          margin: auto;
          line-height: 79rpx;
          padding: 0 40rpx;
          font-size: 34rpx;
          text-align: center;
          border-radius: 140rpx;
          background-color: #f7c02f;
          box-shadow: 0 0 2px #f7c02f;
        }*/
    } // 蒙层
    &-mask {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 9;
    }
}